<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form :model="applyModel" :rules="rules" label-width="100px" ref="form">
      <!-- 公共 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="账户号" class="applicant">
            <el-input v-model="applyModel.caseNumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'AGENT_APPLY' || rowType === 'PAUSE_CASE' || this.rowType === 'ACTIVE_SMS' || this.rowType === 'ACTIVE_TEL' || this.rowType === 'PAUSE_CASE_ACTIVE' || this.rowType === 'PAUSE_TEL' || this.rowType === 'PAUSE_SMS'">
          <el-form-item label="客户姓名" class="applicant">
            <el-input v-model="applyModel.customerName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="客户姓名" class="applicant">
            <el-input v-model="applyModel.personalName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="渠道" class="applicant">
            <el-select v-model="applyModel.channelType" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('ChannelType')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'CASE_ADJUSTMENT'">
          <el-form-item label="调整类型" v-if="rowType === 'CASE_ADJUSTMENT'">
            <el-select v-model="applyModel.typeName" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CaseType')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="(rowType === 'PAUSE_TEL' || rowType === 'PAUSE_SMS' || rowType === 'STOP_CASE' || rowType === 'PAUSE_CASE') && rowType !== 'CASE_ADJUSTMENT'">
          <el-form-item label="停催截止时间">
            <el-input :value="$filter.dateTimeFormat(applyModel.leaveDueDate)" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'LEAVE_CASE' && rowType !== 'CASE_ADJUSTMENT'">
          <el-form-item label="留案到期时间">
            <el-input :value="$filter.dateTimeFormat(applyModel.leaveDueDate)" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'AGENT_APPLY'">
          <el-form-item label="代理到期时间" v-if="rowType === 'AGENT_APPLY'">
            <el-date-picker placeholder="请选择日期" disabled type="date" v-model="rowData.leaveDueDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'AGENT_APPLY'">
          <el-form-item label="代理人" class="applicant" v-if="rowType === 'AGENT_APPLY'">
            <!-- <el-input :value="applyModel.currentAgentName" disabled></el-input> -->
            <el-input :value="applyModel.currentAgentCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'PAUSE_CASE' || this.rowType === 'PAUSE_TEL' || this.rowType === 'PAUSE_SMS' || rowType === 'AGENT_APPLY' || this.rowType === 'ACTIVE_SMS' || this.rowType === 'ACTIVE_TEL' || this.rowType === 'PAUSE_CASE_ACTIVE' || rowType === 'CASE_ADJUSTMENT'">
          <el-form-item label="申请机构" class="applicant">
            <el-input v-model.trim="applyModel.departmentName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="申请机构" class="applicant">
            <el-input v-model.trim="applyModel.applyUserDeptName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'AGENT_APPLY'">
          <el-form-item label="经办代号" class="applicant">
            <el-input v-model.trim="applyModel.handlerCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else-if=" ['PAUSE_CASE','PAUSE_TEL','PAUSE_SMS','PAUSE_CASE_ACTIVE','CASE_BACK'].includes(rowType)">
          <el-form-item label="经办代号" class="applicant">
            <el-input v-model.trim="applyModel.agentCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-else>
          <el-form-item label="经办代号" class="applicant">
            <el-input v-model.trim="applyModel.operatorCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'DERATE_CASE'">
          <el-form-item label="申请减免金额" class="applicant">
            <el-input v-model.trim="applyModel.derateAmount" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="rowType === 'DERATE_CASE'">
          <el-form-item label="申请附件" class="applicant">
            <el-button type='text' size="mini" v-for="item in applyModel.fileInfoList" :key="item.fileId" @click="$common.downloadFile(item.url, item.fileName)">{{ item.fileName }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'ACTIVE_SMS' || rowType === 'ACTIVE_TEL' || rowType === 'PAUSE_CASE_ACTIVE' || rowType === 'AGENT_APPLY' || this.rowType === 'PAUSE_TEL' || this.rowType === 'PAUSE_SMS' || this.rowType === 'STOP_CASE' || rowType === 'PAUSE_CASE' || rowType === 'CASE_ADJUSTMENT'">
          <el-form-item label="审批状态" class="applicant">
            <el-select v-model="applyModel.applyStatus" disabled>
              <el-option :key="index" :label="item.name" :value="item.code" v-for="(item, index) in $dict.getDictData('ApplyStatus')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'PAUSE_TEL' || rowType === 'ACTIVE_TEL' || rowType === 'PAUSE_SMS' || rowType === 'ACTIVE_SMS'">
          <el-form-item label="电话号码" class="applicant">
            <el-input v-model.trim="applyModel.phoneNumber" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'CASE_BACK'">
          <el-form-item label="退案原因码" class="applicant">
            <el-input v-model.trim="applyModel.agentCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="rowType === 'LEAVE_CASE'">
          <el-form-item label="留案原因码" class="applicant">
            <el-input v-model.trim="applyModel.applyDescription" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="申请原因" v-if="rowType === 'CASE_ADJUSTMENT'">
        <el-input :value="applyModel.note" type="textarea" disabled :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="备注" v-else-if="rowType === 'CASE_BACK'">
        <el-input :value="applyModel.note" type="textarea" disabled :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="申请原因" v-else-if="rowType === 'LEAVE_CASE'">
        <el-input :value="applyModel.remark" type="textarea" disabled :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="申请原因" v-else>
        <el-input :value="applyModel.applyDescription" disabled type="textarea" :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinion" v-if="applyModel.applyStatus==='PENDING' && applyModel.checkUserLinkedList.includes(userId) && type === '审批'">
        <el-input :readonly="applyModel.applyStatus!=='PENDING'" type="textarea" v-model.trim="applyModel.approvalOpinion" clearable :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="审批历史">
        <data-box :data="recordHistory" class="data-box-padding">
          <template slot="columns">
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批人" prop="approvalRealName" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)" label="审批时间" prop="approvalTime" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(3)" label="审批结果" prop="applyStatus" show-overflow-tooltip></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批意见" prop="approvalOpinion" show-overflow-tooltip></el-table-column>
          </template>
        </data-box>
      </el-form-item>
    </el-form>
    <div class="confirm-button" v-if="rowData.applyStatus==='PENDING'  && rowData.checkUserLinkedList.includes(userId) && type === '审批'">
      <el-button @click="commit('REJECT')">拒绝</el-button>
      <el-button @click="commit('PASS')">同意</el-button>
    </div>
    <div class="confirm-button" v-else>
      <el-button @click="close">关闭</el-button>
    </div>
  </section>
</template>
AGENT_APPLY
<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Dependencies } from "~/core/decorator"
import { Emit, Prop, Watch } from "vue-property-decorator"
import { State, Getter, Action, namespace } from "vuex-class"
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service"
import { Form } from 'element-ui'

@Component({
  components: {}
})
export default class CaseApprovalCommon extends Vue {
  public $refs: { form: Form }
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService

  @State private userData

  private rules: any = {
    applyStatus: [{ required: true, message: "请选择审批状态" }],
    approvalOpinion: [{ required: true, message: "请输入审批意见" }]
  }
  private applyModel: any = {
    applyStatus: "PASS",
    approvalOpinion: "",
    id: ""
  }
  private perDueDate

  @Prop({ required: true }) private rowName: string
  @Prop({ required: true }) private rowId: string
  @Prop({ required: true }) private recordHistory: any
  @Prop({ required: true }) private rowData: any
  @Prop({ required: true }) private rowType: string
  @Prop({ required: true }) private type: string

  @Watch("rowData", { immediate: true }) private idChange (value) {
    this.applyModel = { ...this.rowData }
  }

  @Emit("close") private close () {
    this.reset()
  }

  private mounted () {
    this.applyModel = { ...this.rowData }
  }

  private get userId () {
    return this.userData.id
  }

  private onClickDownload (row) { // 减免附件下载
    const a = document.createElement("a");
    const attrDownload = document.createAttribute("download");
    attrDownload.value = row.id + ".pdf";
    a.attributes.setNamedItem(attrDownload);
    a.href = row.url + "/" + row.id;
    a.click();
  }

  private reset () {
    const form: any = this.$refs["form"]
    form.resetFields()
  }

  private async commit (applyStatus) {
    const result = await this.$refs.form.validate().then(() => true).catch(() => false)
    if (!result) return
    this.applyModel.applyStatus = applyStatus
    this.applyModel.id = this.rowId.split(',')
    this.caseApplyRecordService.dealApply(this.applyModel).subscribe(
      data => {
        this.$message.success("操作成功")
        this.close()
      },
      err => {
        this.applyModel.id = this.rowData.id
        this.close()
      }
    )
  }

  private annexCheckClick (row) { //附件查看
    window.open(row.url, row.fileName)
  }
}
</script>

<style lang="less" scoped>
.data-box-padding {
  padding: 0 !important;
}
/*deep*/
.form-name {
  display: inline-block;
  min-width: 33%;
}
/*deep*/
.applicant .el-input {
  width: 100% !important;
}
</style>
<style lang="less">
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
</style>
